<template>
  <div class="container">
    <el-radio-group v-model="radio" size="medium" class="seleDate" @change="handleChange">
      <el-radio-button :label="1">日</el-radio-button>
      <el-radio-button :label="2">周</el-radio-button>
      <el-radio-button :label="3">月</el-radio-button>
      <el-radio-button :label="4">年</el-radio-button>
    </el-radio-group>
    <!-- <span>年份：</span>
    <el-date-picker
      style="max-width:150px"
      size="small"
      v-model="year"
      align="left"
      type="year"
      placeholder="选择年"
      @change="fetchData">
    </el-date-picker> -->
    <span>教师：</span>
    <el-select v-model="teacher" placeholder="请选择" clearable size="small" @change="fetchData" filterable>
        <el-option
        v-for="(item,index) in teacherList"
        :key="index"
        :label="item.name"
        :value="item.id">
        </el-option>
    </el-select>
    <span>教室：</span>
    <el-select v-model="classRoom" placeholder="请选择" clearable size="small" @change="fetchData" filterable>
        <el-option
        v-for="(item,index) in classRoomList"
        :key="index"
        :label="item.name"
        :value="item.id">
        </el-option>
    </el-select>
    <span>模拟器：</span>
    <el-select v-model="simulator" placeholder="请选择" clearable size="small" @change="fetchData" filterable>
        <el-option
        v-for="(item,index) in simulatorList"
        :key="index"
        :label="item.asset_name"
        :value="item.id">
        </el-option>
    </el-select>
    <span>日期：</span>
    <el-date-picker v-model="date" type="date" placeholder="选择日" size="small" v-if="radio==1" @change="fetchData" :clearable="false">
    </el-date-picker>
    <el-date-picker v-model="date" type="week" format="yyyy 第WW周" placeholder="选择周" size="small" v-if="radio==2" @change="fetchData" :clearable="false">
    </el-date-picker>
    <el-date-picker v-model="date" type="month" placeholder="选择月" size="small" v-if="radio==3" @change="fetchData" :clearable="false">
    </el-date-picker>
    <el-date-picker v-model="date" type="year" placeholder="选择年" size="small" v-if="radio==4" @change="fetchData" :clearable="false">
    </el-date-picker>
    <el-button-group style="margin-left:20px" class="fr">
      <el-button size="mini" type="primary" @click="changeDate(-1)"><i class="iconfont el-icon--left">&#xe600;</i></el-button>
      <el-button size="mini" type="primary" @click="changeDate(1)"><i class="iconfont el-icon--right">&#xe603;</i></el-button>
    </el-button-group>
    <el-button class="fr" size="small" type="primary" @click="download" v-if="radio==2">下载</el-button>
    <!-- <div id="myChart" class="myChart"></div> -->
    <div id="myChart1" class="myChart" v-show="radio==1" ></div>
    <div id="myChart2" class="myChart" v-show="radio==2" ></div>
    <div id="myChart3" class="myChart" v-show="radio==3" ></div>
    <div id="myChart4" class="myChart" v-show="radio==4" ></div>
  </div>
</template>
<script>
import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
import HighchartsDrilldown from "highcharts/modules/drilldown";
import Highcharts3D from "highcharts/highcharts-3d";
import Xrange from "../../assets/resource/js/xrange";
import Exporting from "../../assets/resource/js/exporting";
HighchartsMore(Highcharts);
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
Xrange(Highcharts);
Exporting(Highcharts);

export default {
  data() {
    return {
      radio: 1,
      year: "",
      teacher: "",
      classRoom: "",
      simulator: "",
      teacherList: [],
      classRoomList: [],
      simulatorList: [],
      myChart1: null,
      myChart2: null,
      myChart3: null,
      myChart4: null,
      date: "",
      today: "",
      height: 0
    };
  },
  methods: {
    getList() {
      this.apiPost("System/getStaffLists").then(res => {
        this.teacherList = res;
      }),
        this.apiPost("System/getClassroomLists").then(res => {
          this.classRoomList = res;
        }),
        this.apiPost("System/getSimulatorLists").then(res => {
          this.simulatorList = res;
        });
    },
    fetchData() {
      let data = {
        time: this.radio,
        date: this.date,
        trainer: this.teacher,
        classroom: this.classRoom,
        simulator: this.simulator
      };
      this.apiPost("Train/trainingCalendar", data).then(res => {
        let data = [];
        res.data = res.data || [];
        this.height = res.data.length*40+150
        let tickInterval = 24 * 3600 * 1000
//        if(this.radio == 3){
//          tickInterval = 7*tickInterval
//        }else if(this.radio == 4){
//          tickInterval = 20*tickInterval
//        }else{
//          tickInterval = tickInterval
//        }
        res.data.forEach(item => {
          let one = {};
          if (this.radio == 1) {
            one["x"] = Date.UTC(
              item.start_year,
              item.start_month,
              item.start_day,
              item.start_hour
            );
            one["x2"] = Date.UTC(
              item.end_year,
              item.end_month,
              item.end_day,
              item.end_hour
            );
          } else {
            one["x"] = Date.UTC(
              item.start_year,
              item.start_month,
              item.start_day
            );
            one["x2"] = Date.UTC(item.end_year, item.end_month, item.end_day);
          }
          one["partialFill"] = item.total;
          one["color"] = "#0177BF";
          (one["y"] = item.y), (one["id"] = item.id);
          data.push(one);
        });

        this["myChart" + this.radio] = new Highcharts.chart(
          "myChart" + this.radio,
          {
            exporting: {
              sourceWidth: (this.radio == 3||this.radio == 4)?1800:1200,
              sourceHeight: this.height
            },
            chart: {
              type: "xrange",
              height: this.height
            },
            credits: {
              enabled: false
            },
            title: {
              text: ''
            },
            xAxis: {
              type: "datetime",
              tickInterval: tickInterval,
              dateTimeLabelFormats: {
                day: "%Y/%m/%d %A"
              },
              opposite: true,
              tickLength: 0,
              labels: {
                rotation: (this.radio!=1)?45:0
              }
            },
            yAxis: {
              title: {
                text: ""
              },
              categories: res.yAxis,
              reversed: true
            },
            tooltip: {
              dateTimeLabelFormats: {
                hour: "%Y/%m/%d",
                day: "%Y/%m/%d",
                month: "%Y/%m/%d"
              }
            },
            series: [
              {
                name: "培训日历",
                dataLabels: {
                  enabled: true
                },
                data: data
              }
            ],
            plotOptions: {
              series: {
                cursor: "pointer",
                events: {
                  click: function(e) {
                    router.push("/training/listDetail/" + e.point.id);
                  },
                  legendItemClick: function(e) {
                    return false;
                  }
                }
              }
            }
          }
        );
      });
    },
    initChart() {},
    changeDate(num) {
      if (this.radio == 1) {
        let date = new Date(this.date);
        date.setDate(date.getDate() + num);
        this.date =
          date.getFullYear() +
          "-" +
          (date.getMonth() + 1) +
          "-" +
          date.getDate();
      } else if (this.radio == 2) {
        let date = new Date(this.date);
        date.setDate(date.getDate() + num * 7);
        this.date =
          date.getFullYear() +
          "-" +
          (date.getMonth() + 1) +
          "-" +
          date.getDate();
      } else if (this.radio == 3) {
        let date = this.date.split("-");
        let year = parseInt(date[0]);
        let month = parseInt(date[1]);
        month += num;
        if (month < 1) {
          month = 12;
          year -= 1;
        }
        if (month > 12) {
          month = 1;
          year += 1;
        }

        this.date = year + "-" + month;
      } else if (this.radio == 4) {
        let year = new Date(this.date).getFullYear()

        this.date = new Date(new Date().setFullYear(year+num))
          //this.date = this.date + num;
      }
    },
    handleChange() {
      // this.myChart.showLoading();
      if (this.radio == 1) {
        this.date = this.today;
      } else if (this.radio == 2) {
        let now = new Date();
        let nowTime = now.getTime();
        let day = now.getDay();
        let oneDayLong = 24 * 60 * 60 * 1000;
        let MondayTime = nowTime - (day - 1) * oneDayLong;
        let monday = new Date(MondayTime);
        this.date =
          monday.getFullYear() +
          "-" +
          (monday.getMonth() + 1) +
          "-" +
          monday.getDate();
      } else if (this.radio == 3) {
        this.date =
          new Date().getFullYear() + "-" + (new Date().getMonth() + 1);
      } else if (this.radio == 4) {
        this.date = new Date();
      }
    },
    getToday() {
      let date = new Date();
      this.today =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      this.date = this.today;
    },
    download() {
      let data = {
        time: this.radio,
        date: this.date
      };
      this.apiPost("Train/trainingDownload", data).then(res => {
        window.location.href = res;
      });
    }
  },
  created() {
    this.getToday();
    this.fetchData();
    this.getList();
    Highcharts.setOptions({
      lang: {
        contextButtonTitle: "图表导出菜单",
        decimalPoint: ".",
        downloadJPEG: "下载JPEG图片",
        downloadPDF: "下载PDF文件",
        downloadPNG: "下载PNG文件",
        downloadSVG: "下载SVG文件",
        drillUpText: "返回 {series.name}",
        loading: "加载中",
        months: [
          "一月",
          "二月",
          "三月",
          "四月",
          "五月",
          "六月",
          "七月",
          "八月",
          "九月",
          "十月",
          "十一月",
          "十二月"
        ],
        noData: "没有数据",
        numericSymbols: ["千", "兆", "G", "T", "P", "E"],
        printChart: "打印图表",
        resetZoom: "恢复缩放",
        resetZoomTitle: "恢复图表",
        shortMonths: [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec"
        ],
        thousandsSep: ",",
        weekdays: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      }
    });
  }
};
</script>
<style lang="css" scoped>
.container {
  box-sizing: border-box;
  width: 100%;
  background: #ffffff;
  min-height: 100%;
  overflow: hidden;
  padding: 30px;
}
.container > span {
  margin-left: 1%;
}
.container > .el-select {
  max-width: 100px;
}
.myChart {
  margin: 30px auto;
}
@font-face {
  font-family: "iconfont"; /* project id 463817 */
  src: url("//at.alicdn.com/t/font_463817_d2s0x42up243g14i.eot");
  src: url("//at.alicdn.com/t/font_463817_d2s0x42up243g14i.eot?#iefix")
      format("embedded-opentype"),
    url("//at.alicdn.com/t/font_463817_d2s0x42up243g14i.woff") format("woff"),
    url("//at.alicdn.com/t/font_463817_d2s0x42up243g14i.ttf") format("truetype"),
    url("//at.alicdn.com/t/font_463817_d2s0x42up243g14i.svg#iconfont")
      format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
</style>
